<template>
<div>
  <h3><span class="findtitle">"{{$store.state.inputvalue}}"</span>的搜索结果：</h3>
 <table>
    <tr>
      <th class="th_one">单曲</th>
      <th class="th_two">歌手</th>
      <th class="th_three">专辑</th>
    </tr>
    <tr  v-for="(item,index) in $store.state.findresults" :key='index'>
      <a href="#" onclick="return false;" @click="play(item.id)"><td>{{item.name}}</td></a>
      <td>{{item.artists[0].name}}</td> 
      <td>{{item.album.name}}</td>
      <!-- 数组数组！！！ -->
    </tr>
  </table>
</div>
  
  
</template>

<script>
import axios from 'axios'
export default {
  methods:{
    play(id){
       axios({
            url:'https://autumnfish.cn/song/url',
            method:'get',
            params:{
                id
            }
        }).then(res=>{
            // console.log(res);
            this.$store.state.url=res.data.data[0].url
            this.$store.state.id=id //当前播放歌曲的id传过去用来获取歌词
        })
    }
  }
}
</script>

<style>
.findtitle{
  font-size: 25px;
  color: rgb(22, 123, 218);
}
table{
   line-height: 50px;
}
tr{
  height: 50px;
}
tr:hover{
  /* background-color: rgb(26, 170, 236); */
}
th{
  /* background-color: rgb(36, 126, 185); */
}
.th_one{
  /* width: 200px; */
}
.th_two{
  width: 100px;
}

</style>
